/** 开箱即用 */
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Inspect from 'vite-plugin-inspect'
import postcsspxtorem from 'postcss-pxtorem'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // svg
import UnoCSS from 'unocss/vite' // unocss
import autoprefixer from 'autoprefixer'
import externalGlobals from 'rollup-plugin-external-globals'
const loader = path.resolve(__dirname, 'loader/pxtoremloader.js')
import { fileURLToPath, URL } from 'node:url'

import { visualizer } from 'rollup-plugin-visualizer'
// vitejs-plugin-legacy  兼容 老浏览器 打包
// vite-plugin-compression 压缩
// vite-plugin-imagemin
// https://vitejs.dev/config/
/**  esbuild 预构建依赖  Rollup  打包构建*/

export default defineConfig({
	// base: 'www.', // 打包后文件名
	// npm create vite@latest
	esbuild: {
		drop: ['console', 'debugger'] // 删除 所有的console 和 debugger
	},
	build: {
		// 入口/ 出口/ 代码分割 base63的压缩
		minify: false, // 表示打包后的文件内容不进行压缩，方便阅读
		// terserOptions: { // 不管用？？？
		//   compress: {
		//     drop_console: true,
		//     drop_debugger: true
		//   }
		// },
		// 打包后文件名
		rollupOptions: {
			//以下文件不打包
			// external: ['vue', 'element-plus', 'axios'],
			// plugins: [
			//   // 打包时自动将代码中的引入替换成cdn引入
			//   externalGlobals({
			//     vue: 'Vue',
			//     'element-plus': 'ElementPlus',
			//     axios: 'axios'
			//   })
			// ],

			/**打包结构控制 */
			output: {
				// manualChunks: (id) => {
				//   // 这个ID，就是所有文件的绝对路径
				//   if (id.includes('node_modules')) {
				//     // 因为 node_modules 中的依赖通常是不会改变的
				//     // 这个return 的值就是打包的名称
				//     return 'vendor'
				//   }
				// },
				manualChunks: {
					vue: ['vue'],
					elementPlus: ['element-plus']
				},

				entryFileNames: 'static/js/[name]-[hash].js', // 入口js 文件
				chunkFileNames: 'static/js/[name]-[hash].js', // 处理分包文件
				// assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // ext 根据后缀 生成打包文件
				// 但是这样又分的太细了。可以使用函数，来根据文件类型，生成打包文件名
				assetFileNames(assetInfo) {
					if (assetInfo.name.endsWith('.css')) {
						return 'static/css/[name]-[hash].css'
					}
					let imgExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.avif', '.svg', '.svga']
					if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
						return 'static/img/[name]-[hash].[ext]'
					}
					return 'static/asset/[name]-[hash].[ext]'
				}
			}
		},
		assetsInlineLimit: 1000 // 图片小于1000字节，打包进js文件
	},
	server: {
		port: 3000,
		open: true
		// proxy: {
		//   '/api': {
		//     target: 'http://localhost:3001',
		//     changeOrigin: true,
		//     rewrite: (path) => path.replace(/^\/api/, '')
		//   }
		// }
	},

	plugins: [
		vue(),

		Inspect(),
		AutoImport({
			imports: [
				// auto-import 内置 vue vue-router react 常见基本库的引入规则
				//axios lodash
				'vue',
				'vue-router',
				{
					lodash: [
						// import {concat} from 'lodash'
						'concat',
						// import {compact as cp} from 'lodash'
						['compact', 'cp']
					],
					axios: [
						[
							// import axios from 'axios'
							// import {default as axios } from 'axios'
							'default',
							'axios'
						]
					]
				}
			],
			// 配置本地目录 自动引入
			// dirs: ['./src/**'],
			dirs: ['./src/utils/**']
		}),
		// 引入SVG图标素材文件
		// iconDirs: [path.resolve(__dirname, 'src/assets/svgs')], // 当前模块文件的路径
		createSvgIconsPlugin({
			// iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')], // process.cwd() 会根据 node 进程启动的工作目录，
			iconDirs: [path.resolve(__dirname, 'src/assets/svgs')], // 当前模块文件的路径
			symbolId: 'icon-[dir]-[name]'
		}),
		Components({
			// vue-components 内置了前端主流的resolve element antd
			resolvers: [ElementPlusResolver()],
			// dirs: ['./src/components'], // 默认
			dirs: ['src/components'],
			// 组件名称 包含目录 ，防止命名冲突
			directoryAsNamespaces: true
			// dirs: ['./src/components', './src/index/components'],
		}),
		UnoCSS()
		// visualizer({  // 包分析插件
		//   open: true, // 注意这里要设置为true，否则无效
		//   gzipSize: true, // 分析图生成的文件名
		//   brotliSize: true, // 收集 brotli 大小并将其显示
		//   filename: 'stats.html' // 分析图生成的文件名
		// })
	],
	// 以src 为根路径配置 @
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url))
		},
		//导入时想要省略的扩展名列表
		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', 'jpg']
	},
	// css: {
	//   // 配置postcss 插件
	//   postcss: {
	//     plugins: [
	//       autoprefixer({
	//         overrideBrowserslist: [
	//           'Android 4.1',
	//           'iOS 7.1',
	//           'Chrome > 31',
	//           'ff > 31',
	//           'ie >= 8'
	//           // 'last 2 versions',
	//         ],
	//         grid: true
	//       }),
	//       postcsspxtorem({
	//         rootVa1ue: 75, //UI设计稿的宽度/1g
	//         // rootVa1ue: 100, //UI设计稿的宽度/1g
	//         unitPrecision: 3, //转rem精确到小数点多少位
	//         propList: ['*'], //需要转换的属性*表示所有
	//         selectorBlackList: ['ignore'], //不进行px转换的选择器
	//         replace: true, //是否直接更换属性值，而不添加备用属性
	//         mediaQuery: false, //是否在媒体查询的css代码中也进行转换
	//         minPixelValue: 0, //设置要替换的最小像素值
	//         exclude: /node_modules/i //排除node modules文件夹下的文件
	//       }),
	//       postcsspxtoviewport({
	//         unitToConvert: 'apx', // 什么样的单位会被转换
	//         viewportwidth: 75,
	//         unitPrecision: 6,
	//         propList: ['*'], //少指定转换的css属性的单位，*代表全部css属性的单位都进行转换
	//         viewportUnit: 'vw', //指定需要转换成的视窗单位，默认w
	//         fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw
	//         selectorBlackList: ['ignore-'], //指定不转换为视窗单位的类名，
	//         minPixelValue: 1, //默认值1，小于或等于1px则不进行转换
	//         mediaQuery: false, //是否在媒体查询的css代码中也进行转换，默认false
	//         replace: true //是否转换后直接更换属性值
	//       })
	//     ]
	//   }
	// },
	// fix page change's flash behavior bug
	optimizeDeps: {
		// include: ['element-plus/es/**'] ??
	}
})
